import React ,{useEffect}from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as api from "../../../api/index"
import { Spin, Space, Table, Tag } from 'antd';
function OrderList() {
  const dispatch = useDispatch()

  const table_loading = useSelector((state)=>{
    return state.reduce.table_loading
  })
  const data = useSelector((state)=>{
    return state.reduce.data
  })

  const columns = [
    {
      title: 'Key',
      dataIndex: 'key',
      key: 'key',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: 'Ctiy',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: 'State',
      dataIndex: 'state',
      key: 'state',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];
    ;
  useEffect(()=>{
    dispatch(api.get_table())
  },[dispatch])

  return (
    <div>
       <Spin spinning={table_loading}>
        <Table columns={columns} dataSource={data} />
       </Spin>
    </div>
  )
}

export default OrderList